<template>
  <div class="dashboard-container" v-if="this.role == '管理员'">
    <h1>用户管理</h1>
    <div>
      <el-input placeholder="用户ID" v-model="userId1" clearable style="width: 200px;margin-left: 40px"/>
      <el-input placeholder="用户名称" v-model="userName1" clearable style="width: 200px;margin-left: 40px"/>
      <el-select v-model="roleName1" clearable placeholder="角色" style="width: 200px;margin-left: 40px">
        <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value"/></el-select>
      <el-button type="primary" @click="selectAll" style="width: 100px;margin-left: 40px">查询</el-button>
      <el-button @click="checkUser" style="width: 100px;margin-left: 40px">重置</el-button>
      <el-table :data="userList" height="750px" border style="width: 100%;margin-top: 20px">
        <el-table-column align="center" fixed prop="userId"  label="用户ID" sortable/>
        <el-table-column align="center" fixed prop="userName"  label="用户名" sortable/>
        <el-table-column align="center" fixed prop="userPassword"  label="用户密码" sortable/>
        <el-table-column align="center" fixed prop="roleName"  label="角色名称" sortable/>
        <el-table-column align="center" fixed prop="email"  label="邮箱" sortable/>
        <el-table-column align="center" fixed label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="updateButton(scope.row)" >修改</el-button>
            <el-button type="text" @click="deleteButton(scope.row)"
                       v-if="scope.row.roleId != 1">删除</el-button>
            <el-button type="text" disabled v-else>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="删除" width="40%" :visible.sync="deleteButtonController">
        <h1>请确认是否删除？</h1>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="deleteUser">确定</el-button>
          <el-button @click="deleteButtonController = false">取消</el-button>
        </span>
      </el-dialog>

      <el-dialog title="修改" width="40%" :visible.sync="updateButtonController" @close="closeDialog('ruleForm')">
        <el-form label-width="20%" :rules="roles" :model="updateList" ref="ruleForm">
          <el-form-item label="用户名"  prop="userName">
            <el-input v-model="updateList.userName" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户名称"/>
          </el-form-item>
          <el-form-item label="用户密码"  prop="userPassword">
            <el-input v-model="updateList.userPassword" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入用户密码"/>
          </el-form-item>
          <el-form-item label="邮箱"  prop="email">
            <el-input v-model="updateList.email" maxlength="20" show-word-limit style="width: 80%" clearable placeholder="请输入邮箱"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateUser('ruleForm')">确定</el-button>
          <el-button @click="closeDialog('ruleForm')">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
  <div class="dashboard-container" v-else>
    <h1>无权限访问</h1>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {  deleteUser, findAll,  registered,  updateUser } from '@/api/user'
export default {
  name: 'Users',
  computed: { ...mapGetters(['userId', 'name', 'role']) },
  // 存放页面参数
  data() {
    return {
      userId1: '',
      userName1: '',
      roleName1: '',
      roleList: [
        { value: '管理员', label: '管理员'},
        { value: '用户', label: '用户' }
      ],
      userList: [],
      updateButtonController: false,
      updateList: {
        userId: '',
        roleName: '',
        userName: '',
        userPassword: '',
        email: ''
      },
      deleteButtonController: false,
      deleteUserId: '',
      roles:{
        userName:
          [{required: true, trigger: 'blur', message: '用户名不能为空'},
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }],
        userPassword:
          [{required: true, trigger: 'blur', message: '密码不能为空'},
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }],
        email:
          [{required: true, trigger: 'blur', message: '邮箱不能为空'},
            { min: 6, max: 20, message: '请输入正确的邮箱格式', trigger: 'blur',type: 'email' }]

      }
    }
  },
  // 页面初始化加载的方法
  mounted() {
    this.selectAll()
  },
  // 页面的方法和事件
  methods: {
    selectAll() {
      findAll({
        userId: this.userId1,
        userName: this.userName1,
        roleName: this.roleName1
      }).then(
        response => {
          this.userList = response.data
        }
      )
    },
    checkUser() {
      this.userId1 = ''
      this.userName1 = ''
      this.roleName1 = ''
      this.selectAll()
    },
    updateButton(row) {
      this.updateButtonController = true
      this.updateList = {
        userId: row.userId,
        roleName: row.roleName,
        userName: row.userName,
        userPassword: row.userPassword,
        email: row.email
      }
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser({
            userId: this.updateList.userId,
            roleName: this.updateList.roleName,
            userName: this.updateList.userName,
            userPassword: this.updateList.userPassword,
            email: this.updateList.email
          }).then(response => {
            this.updateButtonController = false
            this.selectAll()
          })
        } else {
          return false;
        }
      });
    },
    closeDialog(formName) {
      this.$refs[formName].resetFields();
      this.updateButtonController = false
    },
    deleteButton(row) {
      this.deleteButtonController = true
      this.deleteUserId = row.userId
    },
    deleteUser(formName) {
      deleteUser({
        userId: this.deleteUserId
      }).then(
        response => {
          this.deleteButtonController = false
          this.selectAll()
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
